

<template>
  <div>

    <el-icon :color="'green'" :size="15">111</el-icon>
    <el-button @click="handleClick" ref="buttonRef">
      <template #icon>我是icon</template>
      按钮</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" circle>Warning</el-button>
    <el-button type="danger" disabled>Danger</el-button>
    <el-button size="large">按钮</el-button>
    <el-button size="small">按钮</el-button>
    <div>
      <el-button-group type="success" size="large">
        <el-button>按钮1</el-button>
        <el-button>按钮2</el-button>
        <el-button>按钮2</el-button>
      </el-button-group>
    </div>
    <div>
      <el-button>Default</el-button>
      <el-button type="primary" size="small">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <div>
      <el-input type="text" v-model="input" placeholder="请输入"></el-input>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, nextTick, watch } from 'vue'
// import { Edit } from '@element-plus/icons-vue'
const buttonRef = ref<HTMLButtonElement>()
const input = ref('')
watch(input, () => {
  console.log('input的值为：',input.value)
})
nextTick(() => {
  console.log(buttonRef.value.ref)

})
const handleClick = (e: HTMLButtonElement) => {
  console.log(e)
}
</script>
<style scoped></style>
